import { messages, queryCurrencyPrecision, eventTrack } from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import config from 'config'
import httpFetch from 'share/httpFetch'
import moment from 'moment'
import ExportModal from 'components/template/export-modal/export-modal';
import { Radio, Table, Badge, Modal, Form, Select, Input, Pagination, Button, Alert, message, Icon, Tooltip, DatePicker,
  Spin, Row, Col, Dropdown, Menu } from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const DropdownButton = Dropdown.Button;
import SearchArea from 'components/search-area'
import menuRoute from 'routes/menuRoute'
import paymentService from 'containers/pay/pay-workbench/pay-workbench.service'
import CostCenterSearchForm from 'components/template/cost-center-search-form/cost-center-search-form'
import EditableCell from 'containers/pay/pay-workbench/editable-cell'
import ErrorModal from 'containers/pay/template/error-modal'
import CheckModal from 'containers/pay/template/check-modal'
import baseService from 'share/base.service'

class PayUnpaid extends React.Component {
  constructor(props) {
    super(props);
    const userJobsDTOs = [];
    props.user.companyWithUserJobsDTOList.map(item => {
      item.userJobsDTOList.map(it => {
        userJobsDTOs.push(it);
      })
    });
    this.mainJob = userJobsDTOs.filter(item => item.companyMainPosition)[0];
    this.state = {
      radioValue: '',
      partnerId: undefined,
      editCellError: false,
      searchParams: { paymentCompanyId: props.tenantMode ? this.mainJob.companyId : props.company.id },
      selectFlag: null,
      payCompanyBankNumber: null,
      chequeNumberFlag: false,//支票号是否可以显示
      searchForm: [
        {
          type: 'list', isRequired: true,listType: 'permission_company',
          id: 'paymentCompanyId',
          defaultValue: props.tenantMode ? [{name: this.mainJob.companyName, id: this.mainJob.companyId}] : [{name: props.company.name, id: props.company.id}],
          label: messages('pay.key137')/*单据公司*/,
          labelKey: 'name',
          valueKey: 'id',
          single: true,
          listExtraParams:{enabled: true}
        },
        { type: 'input', id: 'documentNumber', label: messages('pay.key13'/*单据编号*/) },
        {type: 'value_list', id: 'documentCategory', label: messages('pay.key14'/*单据类型*/), options: [], valueListCode: 2106}, //单据类型
        {
          type: 'list', listType: "select_authorization_user", options: [], id: 'employeeId', label: messages('pay.key15'/*申请人*/), labelKey: "userCode",
          valueKey: "userId", single: true
        },
        {
          type: 'items', id: 'dateRange', items: [
            { type: 'date', id: 'requisitionDateFrom', label: messages('pay.key76'/*申请日期从*/) },
            { type: 'date', id: 'requisitionDateTo', label: messages('pay.key77'/*申请日期至*/) }
          ]
        },
        {
          type: 'items', id: 'amountRange', items: [
            { type: 'input', id: 'amountFrom', label: messages('pay.key78'/*总金额从*/) },
            { type: 'input', id: 'amountTo', label: messages('pay.key79'/*总金额至*/) }
          ]
        },
        {
          type: 'items', id: 'partner', items: [
            {
              type: 'value_list',
              id: 'partnerCategory',
              label: messages('pay.key18')/*类型*/,
              valueListCode: 2107,
              options: [],
              event: 'code'
            },
            {
              type: 'list',
              id: 'partnerId',
              label: messages('pay.key19')/*收款方*/,
              listType: 'user',
              single: true,
              disabled: true,
              labelKey: 'fullName',
              valueKey: "id"
            },
          ]
        },
        {
          type: 'list', id: 'departmentOids', label: messages('financial-management.key195'/*部门*/),
          listType: 'department', labelKey: 'name', valueKey: 'departmentOid'
        }
      ],
      columns: [
        {
          title: `${messages('pay.key13'/*单据编号*/)} | ${messages('pay.key14'/*单据类型*/)}`,
          dataIndex: 'documentNumber', render: (value, record) => (
            <div>
              {value}
              <span className="ant-divider" />
              {record.documentTypeName}
            </div>)
        },
        {
          title: `${messages('pay.key80'/*工号*/)} | ${messages('pay.key15'/*申请人*/)}`,
          dataIndex: 'employeeName', render: (value, record) => (
            <div>
              {record.employeeId}
              <span className="ant-divider" />
              {value}
            </div>)
        },
        {
          title: messages('pay.key81'/*申请日期*/), dataIndex: 'requisitionDate',
          render: value => moment(value).format('YYYY-MM-DD')
        },
        { title: messages('pay.key82'/*币种*/), dataIndex: 'currency' },
        { title: messages('pay.key83'/*总金额*/), dataIndex: 'amount', render: (value, record) => this.filterMoney(value, queryCurrencyPrecision(record.currency)) },
        {
          title: messages('pay.key84'/*可支付金额*/), dataIndex: 'payableAmount', render: (value, record) => {
            let numberString = Number(value || 0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            numberString += (numberString.indexOf('.') > -1 ? '' : '.00');
            return (
              value === record.amount ? this.filterMoney(value, queryCurrencyPrecision(record.currency)) :
                <div style={{ textAlign: 'right' }}>
                  <Tooltip title={messages('pay.key85'/*可支付金额不等于总金额*/)}><Icon type="exclamation-circle-o" style={{ color: 'red', marginRight: 5 }} /></Tooltip>
                  {numberString}
                </div>
            )
          }
        },
        {
          title: messages('pay.key24'/*本次支付金额*/), dataIndex: 'currentPayAmount', render: (value, record) => (
            <EditableCell
              type="number"
              disable={this.state.payAll}
              record={record}
              value={value}
              message={messages('pay.key86'/*点击修改本次支付金额*/)}
              onChangeError={this.state.editCellError}
              onChange={(editValue) => this.editCurrentPay(editValue, record)}
            />
          )
        },
        {
          title: messages('pay.key87'/*付款方式类型*/), dataIndex: 'paymentMethodCategoryName',
          render: (account, record) => (
            <EditableCell value={account}
              message={messages('pay.key88'/*点击修改付款方式类型*/)}
              record={record}
              onChangeError={this.state.editCellError}
              payType="payType"
              onChange={(value) => this.editAccount("paymentMethodCategory", value, record)} />)
        },
        {
          title: messages('pay.key26'/*类型 | 收款方*/), dataIndex: 'partnerCategoryName', render: (value, record) => (
            <div>
              {value}
              <span className="ant-divider" />
              {record.partnerName}
            </div>
          )
        },
        {
          title: messages('pay.key89'/*收款账号*/), dataIndex: 'accountNumber', render: (account, record) => (
            <EditableCell value={account}
              message={messages('pay.key90'/*点击修改收款账号*/)}
              record={record}
              onChangeError={this.state.editCellError}
              onChange={(value, selectItem) => this.editAccount('accountNumber', value, record, selectItem)} />
          )
        },
        { title: messages('common.column.status')/*状态*/, dataIndex: 'paymentStatusName', render: (state) => <Badge status='default' text={state} /> }
      ],
      buttonDisabled: true,
      selectedRowKeys: [], //选中行key
      selectedRows: [],  //选中行
      noticeAlert: null, //提示
      errorAlert: null,  //错误
      currency: null,    //选中行的币种
      payWayFetching: false,
      payAccountFetching: false,
      payWayOptions: [],
      payAccountOptions: [],
      modalVisible: false,
      modalLoading: false,
      pageSizeOptions: ['10', '20', '30', '50'],

      /* 线上 */
      onlineLoading: false,
      onlinePage: 0,
      onlinePageSize: 10,
      onlinePagination: { total: 0 },
      onlineData: [],
      onlineCash: [],                 //总金额

      /* 线下 */
      offlineLoading: false,
      offlinePage: 0,
      offlinePageSize: 10,
      offlinePagination: { total: 0 },
      offlineData: [],
      offlineCash: [],                //总金额

      /* 落地文件 */
      fileLoading: false,
      filePage: 0,
      filePageSize: 10,
      filePagination: { total: 0 },
      fileData: [],
      fileCash: [],                   //总金额
      paymentDetail: menuRoute.getRouteItem('payment-detail', 'key'),    //支付详情
      reimbursementBatchOID: '',
      storageKey: localStorage.getItem('EBANK_PAYMENT_PAY') || 'file',
      searchCostCenterCommands: null,
      exportLoading: false,
      isEBank: {},
      errorVisible: false,
      errorData: {},
      realPayCompanyId: '',
      payAll: false,
      radioOption: [],
      loading: false
    };
  }

  componentWillMount() {
    this.getList();
    this.getFinanceConfig();
  }

  getFinanceConfig = () => {
    let companyId = this.state.searchParams.paymentCompanyId;
    this.setState({ loading: true });
    Promise.all([
      baseService.getFinanceConfig({ companyId, itemGroupCode: 'PAYMENT_1_G1' }),
      baseService.getFinanceConfig({ companyId, itemGroupCode: 'PAYMENT_1_G2' }),
      baseService.getFinanceConfig({ companyId, itemGroupCode: 'PAYMENT_2_G1' })
    ]).then(res => {
      this.setState({
        loading: false,
        radioOption: this.props.orderTab(res[0].data),
        radioValue: res[1].data[0].itemCode,
        payAll: res[2].data[0].itemCode === 'PAYALL'
      });
    }).catch(() => {
      this.setState({ loading: false });
      message.error(messages('pay.key225')/*系统异常*/);
    });
  };

  //获取列表及总金额
  getList = () => {
    let online = new Promise((resolve, reject) => {
      this.getOnlineList(resolve, reject)
    });
    let offline = new Promise((resolve, reject) => {
      this.getOfflineList(resolve, reject)
    });
    let file = new Promise((resolve, reject) => {
      this.getFileList(resolve, reject)
    });
    Promise.all([online, offline, file]).then(() => {
      this.getOnlineCash();
      this.getOfflineCash();
      this.getFileCash();
    }).catch(() => {
      message.error(messages('pay.key29'/*数据加载失败，请重试*/))
    })
  };

  //搜索
  search = (result) => {
    const { searchCostCenterCommands } = this.state;
    result.requisitionDateFrom = result.requisitionDateFrom ? moment(result.requisitionDateFrom).format('YYYY-MM-DD') : null;
    result.requisitionDateTo = result.requisitionDateTo ? moment(result.requisitionDateTo).format('YYYY-MM-DD') : null;
    if (!!this.state.partnerId) {
      result.partnerId = this.state.partnerId;
    } else {
      result.partnerId && result.partnerId.length > 0 && (result.partnerId = result.partnerId[0].id)
    }
    if(searchCostCenterCommands){
      paymentService.getCostCenterId(searchCostCenterCommands).then(res => {
        result.costCenterItemOids = res.data;
        this.setState({
          searchParams: result,
          onlineCash: [],
          offlineCash: [],
          fileCash: []
        }, () => {
          this.getList()
        })
      }).catch(e => {
        message.error(e.response.data.message);
      })
    } else {
      this.setState({
        searchParams: result,
        onlineCash: [],
        offlineCash: [],
        fileCash: []
      }, () => {
        this.getList();
        this.getFinanceConfig();
      })
    }
  };

  //清空搜索区域
  clear = () => {
    this.setState({searchCostCenterCommands: null},() => {
      this.eventHandle('code', null, '1');
    });
  };

  eventHandle = (type, value, search) => {
    let { searchForm, partnerId } = this.state;
    if (type === 'code') {
      partnerId = undefined;
      value = value ? value : "";
      this.formRef.setValues({partnerId: undefined});
      if (value === "EMPLOYEE") {
        let item = searchForm[6];
        item.items[1].disabled = false;
        item.items[1].listType = 'user';
        item.items[1].labelKey = 'fullName';
        searchForm[6] = item;
      }
      if (value === "VENDER") {
        let item = searchForm[6];
        item.items[1].disabled = false;
        item.items[1].listType = 'finance_vendor';
        item.items[1].labelKey = 'venNickname';
        searchForm[6] = item;
      }
      if (value === "") {
        let item = searchForm[6];
        item.items[1].disabled = true;
        searchForm[6] = item;
      }
      this.setState({ searchForm, partnerId },() => {
        search === '1' && this.formRef.handleSearch();
      })
    };
  };

  //选择 线上／线下／落地文件
  onRadioChange = (e) => {
    let onlineData = this.state.onlineData;
    let offlineData = this.state.offlineData;
    let fileData = this.state.fileData;
    onlineData.map(item => {
      item.currentPay = undefined
    });
    offlineData.map(item => {
      item.currentPay = undefined
    });
    fileData.map(item => {
      item.currentPay = undefined
    });
    this.setState({
      radioValue: e.target.value,
      selectedRowKeys: [],
      selectedRows: [],
      onlineData,
      offlineData,
      fileData
    }, () => {
      let values = this.props.form.getFieldsValue();
      Object.keys(values).map(key => {
        this.props.form.setFieldsValue({ [key]: undefined })
      });
      this.noticeAlert(this.state.selectedRows)
    })
  };

  //选择/取消选择某行的回调
  handleSelectRow = (record, selected) => {
    let selectedRows = this.state.selectedRows;
    if (selected) {
      selectedRows.push(record)
    } else {
      selectedRows.map((item, index) => {
        item.id === record.id && (selectedRows[index] = 0)
      });
      selectedRows.delete(0)
    }
    this.setState({ selectedRows }, () => {
      this.noticeAlert(this.state.selectedRows)
    })
  };

  //选中行的key
  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys })
  };

  //选择/取消选择所有行的回调
  handleSelectAllRow = (selected, selectedRow, changeRows) => {
    let selectedRows = this.state.selectedRows;
    if (selected) {
      changeRows.map(item => {
        selectedRows.push(item)
      })
    } else {
      selectedRows.map((row, index) => {
        changeRows.map(item => {
          row.id === item.id && (selectedRows[index] = 0)
        })
      });
      changeRows.map(() => {
        selectedRows.delete(0)
      })
    }
    this.setState({ selectedRows }, () => {
      this.noticeAlert(this.state.selectedRows)
    })
  };

  //提示框显示
  noticeAlert = (rows) => {
    let amount = 0;
    let errFlag = false;
    let currency = rows[0] ? rows[0].currency : null;
    let paymentCompanyId = rows[0] ? rows[0].paymentCompanyId : null;
    this.setState({ currency });
    rows.forEach(item => {
      if (item.currency === currency && item.paymentCompanyId === paymentCompanyId) {
        amount += item.currentPay || item.currentPayAmount
      } else {
        errFlag = true
      }
    });
    if (!errFlag) {
      let noticeAlert = (
        <span> {messages('pay.key30'/*已选择*/)}<span className='default-color-font' style={{ fontWeight: 'bold' }}> {rows.length} </span> {messages('pay.key31'/*项*/)}
          <span className="ant-divider" /> {messages('pay.key130',{arg1:currency}/*本次支付金额总计：{arg1}*/)} <span style={{ fontWeight: 'bold', fontSize: '15px' }}> {this.filterMoney(amount, queryCurrencyPrecision(currency), true)} </span>
        </span>
      );
      this.setState({
        noticeAlert: rows.length ? noticeAlert : null,
        errorAlert: null,
        buttonDisabled: !rows.length
      });
    } else {
      let errorAlert = (
        <span> {messages('pay.key30'/*已选择*/)}<span className='default-color-font' style={{ fontWeight: 'bold' }}> {rows.length} </span> {messages('pay.key31'/*项*/)}
          <span className="ant-divider" /> {messages('pay.key32'/*不同币种、不同付款机构不可同时支付*/)}
        </span>
      );
      this.setState({
        noticeAlert: null,
        errorAlert: errorAlert,
        buttonDisabled: true
      });
    }
  };

  //修改本次支付金额
  editCurrentPay = (value, record) => {
    if (!value || value <= 0) {
      message.error(messages('pay.key91'/*本次支付金额必须大于0*/));
      this.setState({ editCellError: true });
      return
    }
    if (value > record.payableAmount) {
      message.error(messages('pay.key92'/*本次支付金额不能大于可支付金额*/));
      this.setState({ editCellError: true });
      return
    }
    this.setState({ editCellError: false });
    this.state.onlineData.map(item => {
      item.id === record.id && (item.currentPay = value)
    });
    this.state.offlineData.map(item => {
      item.id === record.id && (item.currentPay = value)
    });
    this.state.fileData.map(item => {
      item.id === record.id && (item.currentPay = value)
    });
    this.noticeAlert(this.state.selectedRows);
    message.success(messages('pay.key93'/*修改成功*/))
  };

  //修改收款账号
  editAccount = (key, value, record, selectItem) => {
    let params = {
      id: record.id,
      versionNumber: record.versionNumber
    };

    if (key === "paymentMethodCategory" && record.paymentMethodCategoryName == value) {
      return;
    }

    params[key] = value;
    if (key === 'accountNumber'){
      params = Object.assign(params, selectItem);
    }
    paymentService.updateAccountNum([params]).then(res => {
      if (res.status === 200) {
        message.success(messages('pay.key93'/*修改成功*/));
        this.setState({ editCellError: false }, () => {
          this.getOnlineList();
          this.getOfflineList();
          this.getFileList()
        });
      }
    }).catch(e => {
      this.setState({ editCellError: true });
      message.error(messages('pay.key136',{arg1:e.response.data.message}/*修改失败，{arg1}*/));
    })
  };

  //点击支付按钮
  handlePayModal = () => {
    this.setState({ payWayOptions: [], payAccountOptions: [], modalVisible: true, selectFlag: true, payCompanyBankNumber: null });
    let values = this.props.form.getFieldsValue();
    Object.keys(values).map(key => {
      this.props.form.setFieldsValue({ [key]: undefined });
    });
    this.props.form.setFieldsValue({ currency: this.state.currency });
    this.getExchangeRate()
  };

  //获取汇率
  getExchangeRate = () => {
    let currencyDate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
    let url = `${config.baseUrl}/api/company/standard/currency/get?currency=${this.state.currency}&currencyDate=${currencyDate}`;
    httpFetch.get(url).then(res => {
      this.props.form.setFieldsValue({ exchangeRate: res.data.rate });
    }).catch(e => {
      message.error(messages('pay.key33'/*获取汇率失败！*/));
    })
  };

  //获取付款方式
  getPayWay = () => {
    const { radioValue, payCompanyBankNumber } = this.state;
    //if (this.state.payWayOptions.length > 0) return;
    this.setState({ payWayFetching: true });
    let url = `${config.baseUrl}/api/comapnyBankPayment/get/company/bank/payment/by/bank/account/number?number=${payCompanyBankNumber}&paymentMethod=${radioValue}`;
    httpFetch.get(url).then(res => {
      res.status === 200 && this.setState({ payWayOptions: res.data, payWayFetching: false })
    }).catch(() => {
      this.setState({ payWayFetching: false })
    })
  };

  //获取付款账户
  getPayAccount = () => {
    if (this.state.payAccountOptions.length > 0) return;
    this.setState({ payAccountFetching: true });
    const { selectedRows, searchParams } = this.state;
    let temp = selectedRows[0];
    let setOfBooksId = temp.setOfBooksId;
    let paymentMethodCode = temp.paymentMethodCategory;
    let currency = temp.currency;
    let url = `/api/CompanyBank/getAuthCompanyBank/${this.props.user.userOID}`;
    httpFetch.get(url, {
      setOfBooksId,
      paymentMethodCode,
      currency,
      companyId: searchParams.paymentCompanyId
    }).then(res => {
      res.status === 200 && this.setState({ payAccountOptions: res.data, payAccountFetching: false })
    }).catch(() => {
      this.setState({ payAccountFetching: false })
    })
  };

  //查看支付流水详情
  checkPaymentDetail = (record) => {
    this.context.router.push(this.state.paymentDetail.url.replace(':tab', 'Unpaid').replace(':id', record.id));
  };

  /*********************** 获取总金额 ***********************/

  //线上
  getOnlineCash = () => {
    paymentService.getUnpaidAmount('ONLINE_PAYMENT', this.state.searchParams).then(res => {
      this.setState({ onlineCash: res.data })
    })
  };

  //线下
  getOfflineCash = () => {
    paymentService.getUnpaidAmount('OFFLINE_PAYMENT', this.state.searchParams).then(res => {
      this.setState({ offlineCash: res.data })
    })
  };

  //落地文件
  getFileCash = () => {
    paymentService.getUnpaidAmount('EBANK_PAYMENT', this.state.searchParams).then(res => {
      this.setState({ fileCash: res.data })
    })
  };

  /************************ 获取列表 ************************/

  //线上
  getOnlineList = (resolve, reject) => {
    const { onlinePage, onlinePageSize, searchParams } = this.state;
    this.setState({ onlineLoading: true });
    paymentService.getUnpaidList(onlinePage, onlinePageSize, 'ONLINE_PAYMENT', searchParams).then(res => {
      if (res.status === 200) {
        this.setState({
          onlineData: res.data,
          onlineLoading: false,
          onlinePagination: {
            total: Number(res.headers['x-total-count']) ? Number(res.headers['x-total-count']) : 0
          }
        });
        resolve && resolve()
      }
    }).catch(() => {
      this.setState({ onlineLoading: false });
      reject && reject()
    })
  };

  //线下
  getOfflineList = (resolve, reject) => {
    const { offlinePage, offlinePageSize, searchParams } = this.state;
    this.setState({ offlineLoading: true });
    paymentService.getUnpaidList(offlinePage, offlinePageSize, 'OFFLINE_PAYMENT', searchParams).then(res => {
      if (res.status === 200) {
        this.setState({
          offlineData: res.data,
          offlineLoading: false,
          offlinePagination: {
            total: Number(res.headers['x-total-count']) ? Number(res.headers['x-total-count']) : 0
          }
        });
        resolve && resolve()
      }
    }).catch(() => {
      this.setState({ offlineLoading: false });
      reject && reject()
    })
  };

  //落地文件
  getFileList = (resolve, reject) => {
    const { filePage, filePageSize, searchParams } = this.state;
    this.setState({ fileLoading: true });
    paymentService.getUnpaidList(filePage, filePageSize, 'EBANK_PAYMENT', searchParams).then(res => {
      if (res.status === 200) {
        this.setState({
          fileData: res.data,
          fileLoading: false,
          filePagination: {
            total: Number(res.headers['x-total-count']) ? Number(res.headers['x-total-count']) : 0
          }
        });
        resolve && resolve()
      }
    }).catch(() => {
      this.setState({ fileLoading: false });
      reject && reject()
    })
  };

  /********************** 弹框 - 确认支付 *********************/

  //线上&线下
  handleLineModalOk = value => {
    const { radioValue, storageKey, isEBank, realPayCompanyId } = this.state, { user } = this.props;
    eventTrack({
      category: 'PAY_UNPAID',
      action: radioValue,
      label: `公司=${this.mainJob.companyName}&操作人=${user.name}&操作时间=${new Date().format('yyyy-MM-dd hh:mm:ss')}`
    });
    let key = value.key || null;
    if(key && key !== storageKey) {
      localStorage.setItem('EBANK_PAYMENT_PAY', key);
      this.setState({storageKey: key});
    }
    let params = {};
    params.dataAmountMap = {};
    this.state.selectedRows.map(row => {
      params.dataAmountMap[row.id] = row.currentPay || row.currentPayAmount;
    });
    let fieldNames = ["payCompanyBankNumber", "currency", "exchangeRate", "paymentTypeId", "remark"];
    if (radioValue === 'OFFLINE_PAYMENT') {
      this.state.chequeNumberFlag && fieldNames.push("chequeNumber");
      fieldNames.push("payDate")
    }
    this.props.form.validateFieldsAndScroll(fieldNames, (err, values) => {
      if (!err) {
        values.paymentMethodCategory = radioValue;
        values.payCompanyBankName = isEBank.companyBank.bankAccountName;
        values.payCompanyBankNumber = values.payCompanyBankNumber.key;
        values.paymentDescription = values.paymentTypeId.label;
        values.paymentTypeId = values.paymentTypeId.key;
        values.payDate && (values.payDate = moment(values.payDate));
        values.realPayCompanyId = realPayCompanyId;
        params.cashPayDTO = values;
        this.setState({ modalLoading: true });
        if (radioValue == 'ONLINE_PAYMENT' || radioValue == 'OFFLINE_PAYMENT') {
          if (isEBank.bankPayInfo && isEBank.bankPayInfo.status === 'Y' && radioValue === 'ONLINE_PAYMENT') {
            params.bankPayChannel = isEBank.bankPayInfo.vendor;
            paymentService.checkEBank(params).then(res => {
              if (res.data.isSuccess) {
                let uKey = this.props.checkBrowser(res.data.requestSeqNo);
                if ( uKey ) {
                  let tempParams = Object.assign(params, {
                    bankPayChannel: isEBank.bankPayInfo.vendor,
                    orderRequestNo: res.data.orderRequestNo,
                    data: {
                      requestSeqNo: res.data.orderRequestNo,
                      oper: uKey.certInfo.split('@')[1],
                      operSign: uKey.res
                    }
                  });
                  paymentService.createOrder(tempParams).then(response => {
                    switch (response.data.batStatus) {
                      case '01':
                        message.error(response.data.message);
                        this.setState({ modalLoading: false });
                        return;
                      case '02':
                        Modal.confirm({
                          title: messages('pay.key234')/*重复风险警告*/,
                          content: messages('pay.key235')/*本次支付存在重复支付请求风险，是否继续支付？*/,
                          onOk: () => this.handleContinuePay(response.data),
                          onCancel: () => {this.setState({ modalLoading: false })}
                        });
                        return;
                      default:
                        message.success(messages('pay.key66')/*支付成功*/);
                        this.getOnlineList();
                        this.getOnlineCash();
                        this.setState({
                          modalVisible: false,
                          modalLoading: false,
                          selectedRowKeys: [],
                          selectedRows: [],
                          noticeAlert: null
                        });
                        return;
                    }
                  })
                } else {
                  this.setState({ modalLoading: false })
                }
              } else {
                this.setState({ errorData: res.data },() => {
                  this.setState({ errorVisible: true })
                });
              }
            }).catch(e => {
              message.error(e.response.data.message);
              this.setState({ modalLoading: false })
            })
          } else {
            paymentService.confirmPay(params).then(res => {
              if (res.status === 200) {
                message.success(messages('common.operate.success')/*操作成功*/);
                if (radioValue === 'ONLINE_PAYMENT') {
                  this.getOnlineList();
                  this.getOnlineCash()
                } else if (radioValue == 'OFFLINE_PAYMENT') {
                  this.getOfflineList();
                  this.getOfflineCash()
                }
                this.setState({
                  modalVisible: false,
                  modalLoading: false,
                  selectedRowKeys: [],
                  selectedRows: [],
                  noticeAlert: null
                })
              }
            }).catch(e => {
              message.error(messages('pay.key131',{arg1:e.response.data.message}/*操作失败，{arg1}*/));
              this.setState({ modalLoading: false })
            })
          }
        } else {
          this.setState({ exportLoading: true });
          paymentService.confirmPay(params).then(res => {
            if (res.status === 200) {
              this.setState({reimbursementBatchOID: res.data, exportLoading: false},() => {
                this.export.setInitState();
                this.getFileList();
                this.getFileCash();
                this.setState({
                  modalVisible: false,
                  modalLoading: false,
                  selectedRowKeys: [],
                  selectedRows: [],
                  noticeAlert: null
                })
              });
            }
          }).catch(e => {
            this.setState({ modalLoading: false, exportLoading: false });
            message.error(e.response.data.message);
          });
        }
      }
    })
  };

  handleContinuePay = data => {
    const { porderId, batchNo } = data;
    paymentService.continuePay({ porderId, batchNo }).then(res => {
      if (res.data) {
        message.success(messages('pay.key66')/*支付成功*/);
        this.getOnlineList();
        this.getOnlineCash();
        this.setState({
          modalVisible: false,
          modalLoading: false,
          selectedRowKeys: [],
          selectedRows: [],
          noticeAlert: null
        });
      }
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({ modalLoading: false });
    });
  };

  /********************* 修改每页显示数量 *********************/

  //线上
  onlinePaginationChange = (onlinePage, onlinePageSize) => {
    onlinePage = onlinePage - 1;
    this.setState({ onlinePage, onlinePageSize }, () => {
      this.getOnlineList()
    })
  };

  //线下
  offlinePaginationChange = (offlinePage, offlinePageSize) => {
    offlinePage = offlinePage - 1;
    this.setState({ offlinePage, offlinePageSize }, () => {
      this.getOfflineList()
    })
  };

  //落地文件
  filePaginationChange = (filePage, filePageSize) => {
    filePage = filePage - 1;
    this.setState({ filePage, filePageSize }, () => {
      this.getFileList()
    })
  };

  /************************ 内容渲染 ************************/

  //线上
  renderOnlineContent = () => {
    const { onlineLoading, columns, onlineData, onlinePageSize, onlinePagination, onlineCash, selectedRowKeys, pageSizeOptions } = this.state;
    const rowSelection = {
      selectedRowKeys: selectedRowKeys,
      onChange: this.onSelectChange,
      onSelect: this.handleSelectRow,
      onSelectAll: this.handleSelectAllRow
    };
    const tableTitle = (
      <div>
        {messages('pay.key94'/*未付款*/)}
        {onlineCash.length > 0 && <span className="ant-divider" />}
        {onlineCash.map((item, index) => {
          return (
            <div key={index} style={{ display: 'inline-block' }}> {messages('pay.key132',{arg1:item.currency}/*金额：{arg1}*/)} <span className="num-style">{this.filterMoney(item.totalAmount, queryCurrencyPrecision(item.currency), true)}</span>
              <span className="ant-divider" /> {messages('pay.key37'/*交易笔数：*/)}<span className="num-style">{item.documentNumber}{messages('pay.key38'/*笔*/)}</span>
              {index !== onlineCash.length - 1 && <span className="ant-divider" />}
            </div>
          )
        })}
      </div>
    );
    return (
      <div className="unpaid-online">
        <Table rowKey={record => record.id}
          columns={columns}
          dataSource={onlineData}
          pagination={false}
          loading={onlineLoading}
          rowSelection={rowSelection}
          title={() => { return tableTitle }}
          scroll={{ x: true, y: false }}
          bordered
          size="middle" />
        <Pagination size="small"
          defaultPageSize={onlinePageSize}
          showSizeChanger
          pageSizeOptions={pageSizeOptions}
          total={onlinePagination.total}
          onChange={this.onlinePaginationChange}
          onShowSizeChange={this.onlinePaginationChange}
          style={{ margin: '16px 0', textAlign: 'right' }} />
      </div>
    )
  };

  //线下
  renderOfflineContent = () => {
    const { offlineLoading, columns, offlineData, offlinePageSize, offlinePagination, offlineCash, pageSizeOptions } = this.state;
    const rowSelection = {
      onSelect: this.handleSelectRow,
      onSelectAll: this.handleSelectAllRow
    };
    const tableTitle = (
      <div>
        {messages('pay.key94'/*未付款*/)}
        {offlineCash.length > 0 && <span className="ant-divider" />}
        {offlineCash.map((item, index) => {
          return (
            <div key={index} style={{ display: 'inline-block' }}> {messages('pay.key132',{arg1:item.currency}/*金额：{arg1}*/)} <span className="num-style">{this.filterMoney(item.totalAmount, queryCurrencyPrecision(item.currency), true)}</span>
              <span className="ant-divider" /> {messages('pay.key37'/*交易笔数：*/)}<span className="num-style">{item.documentNumber}{messages('pay.key38'/*笔*/)}</span>
              {index !== offlineCash.length - 1 && <span className="ant-divider" />}
            </div>
          )
        })}
      </div>
    );
    return (
      <div className="unpaid-offline">
        <Table rowKey={record => record.id}
          columns={columns}
          dataSource={offlineData}
          pagination={false}
          loading={offlineLoading}
          rowSelection={rowSelection}
          title={() => { return tableTitle }}
          scroll={{ x: true, y: false }}
          bordered
          size="middle" />
        <Pagination size="small"
          defaultPageSize={offlinePageSize}
          showSizeChanger
          pageSizeOptions={pageSizeOptions}
          total={offlinePagination.total}
          onChange={this.offlinePaginationChange}
          onShowSizeChange={this.offlinePaginationChange}
          style={{ margin: '16px 0', textAlign: 'right' }} />
      </div>
    )
  };

  //落地文件
  renderFileContent = () => {
    const { fileLoading, columns, fileData, filePageSize, filePagination, fileCash, pageSizeOptions, selectedRowKeys } = this.state;
    const rowSelection = {
      onSelect: this.handleSelectRow,
      onSelectAll: this.handleSelectAllRow,
      onChange: this.onSelectChange,
      selectedRowKeys: selectedRowKeys
    };
    const tableTitle = (
      <div>
        {messages('pay.key94'/*未付款*/)}
        {fileCash.length > 0 && <span className="ant-divider" />}
        {fileCash.map((item, index) => {
          return (
            <div key={index} style={{ display: 'inline-block' }}> {messages('pay.key132',{arg1:item.currency}/*金额：{arg1}*/)} <span className="num-style">{this.filterMoney(item.totalAmount, queryCurrencyPrecision(item.currency), true)}</span>
              <span className="ant-divider" /> {messages('pay.key37'/*交易笔数：*/)}<span className="num-style">{item.documentNumber}{messages('pay.key38'/*笔*/)}</span>
              {index !== fileCash.length - 1 && <span className="ant-divider" />}
            </div>
          )
        })}
      </div>
    );
    return (
      <div className="unpaid-file">
        <Table rowKey={record => record.id}
          columns={columns}
          dataSource={fileData}
          pagination={false}
          loading={fileLoading}
          rowSelection={rowSelection}
          title={() => { return tableTitle }}
          scroll={{ x: true, y: false }}
          bordered
          size="middle" />
        <Pagination size="small"
          defaultPageSize={filePageSize}
          showSizeChanger
          pageSizeOptions={pageSizeOptions}
          total={filePagination.total}
          onChange={this.filePaginationChange}
          onShowSizeChange={this.filePaginationChange}
          style={{ margin: '16px 0', textAlign: 'right' }} />
      </div>
    )
  };

  selectHandleChange = (value) => {
    const { payAccountOptions } = this.state;
    if (value.key) {
      let res = payAccountOptions.find(item => item.companyBank.bankAccountNumber === value.key);
      this.setState({
        selectFlag: false,
        payCompanyBankNumber: value.key,
        payWayOptions: [],
        realPayCompanyId: res.companyId,
        isEBank: res
      });
      this.props.form.setFieldsValue({ paymentTypeId: undefined });
    }
  };

  //日期限制
  disabledDate = (current) => {
    return current && current.valueOf() > Date.now();
  };

  //支付方式改变
  onChangePaymentMethod = (value) => {
    const { payWayOptions } = this.state;
    let paymentMethodId;
    payWayOptions.map(item => {
      if (item.paymentMethodCode === 'PAY_IN_CHEQUE') {
        paymentMethodId = item.paymentMethodId;
      }
    });
    if (paymentMethodId === value.key) {
      this.setState({ chequeNumberFlag: true });
    } else {
      this.props.form.setFieldsValue({ chequeNumber: undefined });
      this.setState({ chequeNumberFlag: false });
    }
  };

  changeCostCenter = (value) => {
    this.setState({searchCostCenterCommands: value})
  };

  handleCloseError = () => {
    this.setState({ errorVisible: false, modalVisible: false, modalLoading: false });
  };

  /************************* End *************************/

  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectFlag, searchForm, modalVisible, radioValue, payWayOptions, payAccountOptions, buttonDisabled,
      noticeAlert, errorAlert, payWayFetching, payAccountFetching, modalLoading, reimbursementBatchOID,
      searchCostCenterCommands, storageKey, exportLoading, errorData, errorVisible, loading,
      radioOption } = this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14, offset: 1 },
    };
    const menu = (
      <Menu onClick={this.handleLineModalOk} style={{ maxHeight:250, overflow:'auto', width: '145px' }}>
        <Menu.Item key={'file'}>{messages('pay.key49')/*导出报盘文件*/}</Menu.Item>
        <Menu.Item key={'detail'}>{messages('pay.key220')/*导出报盘明细*/}</Menu.Item>
      </Menu>
    );
    return (
      <Spin className="pay-unpaid" spinning={loading}>
        <ExportModal
          exportTitle={''}
          exportType="REIMBURSEMENT_BATCH"
          disabled={!this.checkNewAuth()}
          exportCondition={{
            reimbursementBatchOID: reimbursementBatchOID
          }}
          wrappedComponentRef={(inst) => this.export = inst}
          exportCommand={storageKey === 'file' ? 'BATCH' : 'BATCH_DETAIL'}/>
        <SearchArea
          searchForm={searchForm}
          eventHandle={this.eventHandle}
          submitHandle={this.search}
          clearHandle={this.clear}
          wrappedComponentRef={(inst) => this.formRef = inst}
          extraFieldsIndex={8}
          extraFields={[
            <div>
              <div style={{lineHeight: '28px'}}> {messages('pay.key110')/*成本中心*/}
              </div>
              <CostCenterSearchForm title={messages('pay.key110')/*成本中心*/}
                                    type='id'
                                    value={searchCostCenterCommands}
                                    onChange={this.changeCostCenter}/>
            </div>
          ]}
        />
        <Radio.Group value={radioValue} style={{ margin: '20px 0' }}
          onChange={this.onRadioChange}>
          {
            radioOption.map(item => <Radio.Button value={item.itemCode}>{item.showName}</Radio.Button>)
          }
        </Radio.Group>
        <Button type="primary"
          style={{ marginBottom: 10, display: 'block' }}
          disabled={buttonDisabled}
          onClick={this.handlePayModal}>
          {radioValue === 'ONLINE_PAYMENT' && messages('pay.key95'/*线上支付*/)}
          {radioValue === 'OFFLINE_PAYMENT' && messages('pay.key96'/*线下支付*/)}
          {radioValue === 'EBANK_PAYMENT' && messages('pay.key97'/*落地文件支付*/)}
        </Button>
        {noticeAlert ? <Alert message={noticeAlert} type="info" showIcon style={{ marginBottom: '10px' }} /> : ''}
        {errorAlert ? <Alert message={errorAlert} type="error" showIcon style={{ marginBottom: '10px' }} /> : ''}
        {radioValue === 'ONLINE_PAYMENT' && this.renderOnlineContent()}
        {radioValue === 'OFFLINE_PAYMENT' && this.renderOfflineContent()}
        {radioValue === 'EBANK_PAYMENT' && this.renderFileContent()}
        {radioValue === 'ONLINE_PAYMENT' ? (
          <Modal title={messages('pay.key98'/*线上支付确认*/)}
            visible={modalVisible}
            okText={messages('pay.key46'/*确认支付*/)}
            confirmLoading={modalLoading}
            onOk={this.handleLineModalOk}
            onCancel={() => this.setState({ modalVisible: false })}>
            <Form>
              <FormItem  {...formItemLayout} label={messages('pay.key47'/*付款账户*/)}>
                {getFieldDecorator('payCompanyBankNumber', {
                  rules: [{
                    required: true,
                    message: messages('common.select')/*请选择*/
                  }]
                })(
                  <Select placeholder={messages('common.select')/*请选择*/}
                    onFocus={this.getPayAccount}
                    notFoundContent={payAccountFetching ? <Spin size="small" /> : messages('pay.key6'/*无匹配结果*/)}
                    onChange={this.selectHandleChange}
                    labelInValue>
                    {payAccountOptions.map(option => {
                      return <Option
                        key={option.companyBank.bankAccountNumber}
                        title={option.companyBank.bankAccountNumber}
                        style={{whiteSpace: 'unset'}}
                      >
                        {`${option.companyBank.bankAccountName} - ${option.companyBank.bankAccountNumber}`}
                        {option.bankPayInfo && option.bankPayInfo.status === 'Y' && (
                          <span style={{color: "#108ee9"}}>{messages('pay.key233')/*（银企直联生效中）*/}</span>
                        )}
                      </Option>
                    })}
                  </Select>
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('common.currency')/*币种*/}>
                {getFieldDecorator('currency', {
                  rules: [{
                    required: true
                  }]
                })(
                  <Input disabled />
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('common.currency.rate')/*汇率*/}>
                {getFieldDecorator('exchangeRate', {
                  rules: [{
                    required: true
                  }]
                })(
                  <Input disabled />
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('pay.key25'/*付款方式*/)}>
                {getFieldDecorator('paymentTypeId', {
                  rules: [{
                    required: true,
                    message: messages('common.select')/*请选择*/
                  }]
                })(
                  <Select placeholder={messages('common.select')/*请选择*/}
                    onFocus={this.getPayWay}
                    notFoundContent={payWayFetching ? <Spin size="small" /> : messages('pay.key6'/*无匹配结果*/)}
                    disabled={selectFlag}
                    labelInValue>
                    {payWayOptions.map(option => {
                      return <Option key={option.paymentMethodId}>{option.description}</Option>
                    })}
                  </Select>
                  )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('common.remark')/*备注*/}>
                {getFieldDecorator('remark')(
                  <TextArea autosize={{ minRows: 2 }} style={{ minWidth: '100%' }} placeholder={messages('common.please.input')/*请输入*/} />
                )}
              </FormItem>
            </Form>
          </Modal>
        ) : radioValue === 'OFFLINE_PAYMENT' ? (
          <Modal title={messages('pay.key99'/*线下支付确认*/)}
            visible={modalVisible}
            okText={messages('pay.key46'/*确认支付*/)}
            confirmLoading={modalLoading}
            onOk={this.handleLineModalOk}
            onCancel={() => this.setState({ modalVisible: false })}>
            <Form>
              <Alert message={messages('pay.key100'/*线下支付，确认付款后，支付状态直接变为支付成功*/)} type="info" showIcon style={{ position: 'relative', top: -10 }} />
              <FormItem  {...formItemLayout} label={messages('pay.key101'/*付款日期*/)}>
                {getFieldDecorator('payDate', {
                  rules: [{
                    required: true,
                    message: messages('common.select')/*请选择*/
                  }]
                })(
                  <DatePicker disabledDate={this.disabledDate} />
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('pay.key47'/*付款账户*/)}>
                {getFieldDecorator('payCompanyBankNumber', {
                  rules: [{
                    required: true,
                    message: messages('common.select')/*请选择*/
                  }]
                })(
                  <Select placeholder={messages('common.select')/*请选择*/}
                    onFocus={this.getPayAccount}
                    notFoundContent={payAccountFetching ? <Spin size="small" /> : messages('pay.key6'/*无匹配结果*/)}
                    onChange={this.selectHandleChange}
                    labelInValue>
                    {payAccountOptions.map(option => {
                      return <Option key={option.companyBank.bankAccountNumber} style={{whiteSpace: 'unset'}}>
                        {`${option.companyBank.bankAccountName} - ${option.companyBank.bankAccountNumber}`}
                        </Option>
                    })}
                  </Select>
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('common.currency')/*币种*/}>
                {getFieldDecorator('currency', {
                  rules: [{
                    required: true
                  }]
                })(
                  <Input disabled />
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('common.currency.rate')/*汇率*/}>
                {getFieldDecorator('exchangeRate', {
                  rules: [{
                    required: true
                  }]
                })(
                  <Input disabled />
                  )}
              </FormItem>
              <FormItem  {...formItemLayout} label={messages('pay.key25'/*付款方式*/)}>
                {getFieldDecorator('paymentTypeId', {
                  rules: [{
                    required: true,
                    message: messages('common.select')/*请选择*/
                  }]
                })(
                  <Select placeholder={messages('common.select')/*请选择*/}
                    onFocus={this.getPayWay}
                    notFoundContent={payWayFetching ? <Spin size="small" /> : messages('pay.key6'/*无匹配结果*/)}
                    disabled={selectFlag}
                    onChange={this.onChangePaymentMethod}
                    labelInValue>
                    {payWayOptions.map(option => {
                      return <Option key={option.paymentMethodId}>{option.description}</Option>
                    })}
                  </Select>
                  )}
              </FormItem>
              {this.state.chequeNumberFlag ? <FormItem  {...formItemLayout} label={messages('pay.key102'/*支票号*/)}>
                {getFieldDecorator('chequeNumber', {
                })(
                  <Input />
                  )}
              </FormItem> : ''}
              <FormItem {...formItemLayout} label={messages('common.remark')/*备注*/}>
                {getFieldDecorator('remark')(
                  <TextArea autosize={{ minRows: 2 }} style={{ minWidth: '100%' }} placeholder={messages('common.please.input')/*请输入*/} />
                )}
              </FormItem>
            </Form>
          </Modal>
        ) : (
          <Modal title={messages('pay.key97'/*落地文件支付*/)}
                 visible={modalVisible}
                 bodyStyle={{maxHeight: '70vh', overflow: 'auto'}}
                 confirmLoading={modalLoading}
                 footer={[
                   <Button onClick={() => this.setState({modalVisible: false})} style={{marginRight: '10px'}}>{messages('common.cancel')/*取消*/}</Button>,
                   <DropdownButton
                     overlay={menu}
                     type='primary'
                     placement="bottomRight"
                     onClick={this.handleLineModalOk}
                     disabled={exportLoading}
                     icon={<Icon type="down"/>}
                   >
                     <span>{storageKey === 'file' ? messages('pay.key49')/*导出报盘文件*/ : messages('pay.key220')/*导出报盘明细*/}</span>
                   </DropdownButton>
                 ]}
                onCancel={() => this.setState({ modalVisible: false })}>
                <Form>
                  <div style={{ marginBottom: 15 }}>01. {messages('pay.key50'/*选择付款账号*/)}</div>
                  <FormItem  {...formItemLayout} label={messages('pay.key47'/*付款账户*/)}>
                    {getFieldDecorator('payCompanyBankNumber', {
                      rules: [{
                        required: true,
                        message: messages('common.select')/*请选择*/
                      }]
                    })(
                      <Select placeholder={messages('common.select')/*请选择*/}
                        onFocus={this.getPayAccount}
                        notFoundContent={payAccountFetching ? <Spin size="small" /> : messages('pay.key6'/*无匹配结果*/)}
                        onChange={this.selectHandleChange}
                        labelInValue>
                        {payAccountOptions.map(option => {
                          return <Option key={option.companyBank.bankAccountNumber} style={{whiteSpace: 'unset'}}>
                            {`${option.companyBank.bankAccountName} - ${option.companyBank.bankAccountNumber}`}
                            </Option>
                        })}
                      </Select>
                      )}
                  </FormItem>
                  <FormItem  {...formItemLayout} label={messages('common.currency')/*币种*/}>
                    {getFieldDecorator('currency', {
                      rules: [{
                        required: true
                      }]
                    })(
                      <Input disabled />
                      )}
                  </FormItem>
                  <FormItem  {...formItemLayout} label={messages('common.currency.rate')/*汇率*/}>
                    {getFieldDecorator('exchangeRate', {
                      rules: [{
                        required: true
                      }]
                    })(
                      <Input disabled />
                      )}
                  </FormItem>
                  <div style={{ marginBottom: 15 }}>02. {messages('pay.key51'/*选择付款方式*/)}</div>
                  <FormItem  {...formItemLayout} label={messages('pay.key25'/*付款方式*/)}>
                    {getFieldDecorator('paymentTypeId', {
                      rules: [{
                        required: true,
                        message: messages('common.select')/*请选择*/
                      }]
                    })(
                      <Select placeholder={messages('common.select')/*请选择*/}
                        onFocus={this.getPayWay}
                        notFoundContent={payWayFetching ? <Spin size="small" /> : messages('pay.key6'/*无匹配结果*/)}
                        disabled={selectFlag}
                        labelInValue>
                        {payWayOptions.map(option => {
                          return <Option key={option.paymentMethodId}>{option.description}</Option>
                        })}
                      </Select>
                      )}
                  </FormItem>
                  <FormItem {...formItemLayout} label={messages('common.remark')/*备注*/}>
                    {getFieldDecorator('remark')(
                      <TextArea autosize={{ minRows: 2 }} style={{ minWidth: '100%' }} placeholder={messages('common.please.input')/*请输入*/} />
                    )}
                  </FormItem>
                  <div style={{ marginBottom: 15 }}>03. {messages('pay.key221')/*点击下方【导出报盘文件/明细】按钮*/}</div>
                  <div>
                    <Row>
                      <Col offset={1} span={23}>1.{messages('pay.key222')/*导出报盘文件/明细后，单据状态变为【支付中】*/}</Col>
                    </Row>
                    <Row>
                      <Col offset={1} span={23}>2.{messages('pay.key223')/*可通过报盘文件/明细，在网银中进行支付*/}</Col>
                    </Row>
                    <Row>
                      <Col offset={1} span={23}>3.{messages('pay.key55'/*支付成功后，在【等待付款结果】标签下确认支付状态*/)}</Col>
                    </Row>
                  </div>
                </Form>
              </Modal>
            )}
        <ErrorModal visible={errorVisible} close={this.handleCloseError} data={errorData}/>
      </Spin>
    )
  }

}

PayUnpaid.contextTypes = {
  router: React.PropTypes.object
};

PayUnpaid.propTypes = {
  subTab: React.PropTypes.string,
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company,
    tenantMode: state.main.tenantMode
  }
}

const WrappedPayUnpaid = Form.create()(PayUnpaid);
const WrappedPayUnpaidHoc = CheckModal(WrappedPayUnpaid);
export default connect(mapStateToProps)(WrappedPayUnpaidHoc);
